<script>
const app = getApp();
export default {
  name: "task-note-item",
  props: {
    taskItem: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      baseUrl: app.globalData.baseUrl,
      imgurlBwc: app.globalData.imgurlBwc,
    }
  },
  mounted() {
    console.log("任务笔记列表", this.taskItem)
  },
  methods: {
    //图片放大预览
    previewImage(imgUrl,imgArr) {
      // console.log('图片==', imgUrl)
      // console.log('图片arr==', imgArr)
      uni.previewImage({
        current: imgUrl, // 当前显示图片的索引，默认是0
        urls: imgArr, // 需要预览的图片HTTP链接列表
      });
    },
    // 复制笔记链接
    copy_no(url) {
      uni.setClipboardData({
        data: url, // e是你要保存的内容
        success: function () {
          uni.showToast({
            title: '复制成功',
            icon: 'none'
          })
        }
      });
    },
    // 跳转笔记链接页面
    gotoPage(url){
      console.log('跳转笔记链接=', url)
      window.location.href = url;
    }
  }
}
</script>

<template>
  <view class="taskItem_box">
    <view v-for="(item, index) in taskItem.order_notes" :key="index" class="taskItem_item">
      <view class="shop-list-item-link-title">
        <image :src="imgurlBwc + item.platImg" mode="aspectFill" class="shop-list-item-link-img"></image>
        <text>{{item.platTitle}}笔记截图及链接</text>
      </view>
      <view class="shop-list-item-link-warp">
        <view class="shop-list-item-link-warp-left ellipsis-one-line">报名时间：{{item.create_time}}</view>
      </view>
      <view class="shop-list-item-link-warp">
        <!--#ifdef MP-->
        <view class="shop-list-item-link-warp-left ellipsis-one-line">笔记链接：{{item.url}}</view>
        <!--#endif-->
        <!--#ifdef H5-->
        <view @click="gotoPage(item.url)" class="shop-list-item-link-warp-left ellipsis-one-line">
          笔记链接：<text style="color: #2b85e4;">{{item.url}}</text>
        </view>
        <!--#endif-->
        <view @click="copy_no(item.url)" style="color: #888888">复制</view>
        <!--<image @click="copy_no(linkItem.url)" :src="imgurlBwc + 'note/link-icon.png'" class="shop-list-item-link-img"></image>-->
      </view>
      <view class="shop-list-item-link-warp">
        <view class="shop-list-item-link-warp-left ellipsis-one-line">订单号：{{taskItem.order_num}}</view>
        <view @click="copy_no(taskItem.order_num)" style="color: #888888">复制</view>
      </view>
      <view class="shop-list-item-link-imgBox">
        <scroll-view class="u-scroll-view" scroll-x="true">
          <view v-for="(imgItem, imgIndex) in item.images" :key="imgIndex" class="shop-list-item-link-imgBox-item">
            <image @click="previewImage(imgItem,item.images)" :src="imgItem" mode="aspectFill" class="shop-list-item-link-img"></image>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.taskItem_box{
  padding: 20rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  .taskItem_item{
    .shop-list-item-link-title{
      display: flex;
      align-items: center;
      line-height: 60rpx;
    }
    .shop-list-item-link-warp{
      line-height: 60rpx;
      margin-bottom: 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .shop-list-item-link-warp-left{
        width: calc(100% - 60rpx);
      }
    }
    .shop-list-item-link-imgBox{
      width: 100%;
      height: 320rpx;
      .shop-list-item-link-imgBox-item{
        width: 260rpx;
        height: 320rpx;
        border-radius: 20rpx;
        margin-right: 20rpx;
        display: inline-block;
        // background: #333333;
        .shop-list-item-link-img{
          width: 100%;
          height: 100%;
        }
      }
    }
    .shop-list-item-link-img{
      width: 40rpx;
      height: 40rpx;
      display: block;
      float: left;
      margin-right: 10rpx;
    }
  }

}
</style>